<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Ant Design App</title>
    <!-- 引入Ant Design CSS文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.21.6/antd.min.css">
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 页面内容 -->
<button type="button" class="ant-btn ant-btn-primary">Primary Button</button>
<div id="root"></div>
<!-- 引入Ant Design JavaScript文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.21.6/antd.min.js"></script>
<script type="text/babel" data-type="module">
    import React, { StrictMode } from 'react';
    import { createRoot } from 'react-dom/client';

    let App = function Search() {
      function search(formData) {
        const query = formData.get("query");
        alert(`You searched for '${query}'`);
      }
      return (
        <form action={search}>
          <input name="query" />
          <button type="submit">Search</button>
        </form>
      );
    }


    const root = createRoot(document.getElementById('root'));
    root.render(
      <StrictMode>
        <App />
      </StrictMode>
    );
</script>
</body>
</html>
